<template>
  <div class="user-center">
    <main class="main-content">
      <div class="container">
        <!-- 路径导航 -->
        <div class="breadcrumbs">
          <router-link to="/user-index">首页</router-link>
          <span>→</span>
          <span>我的页面</span>
        </div>
        <div class="content-grid">
          <!-- 侧边栏 -->
          <div class="sidebar">
            <div class="user-card">
              <div class="user-info">
                <div class="avatar-container">
                  <img :src="userProfile?.head_image || defaultAvatar" style="height: 82px;width: 83px">
                </div>
                <h3 class="username">{{ currentUser.username || '未登录' }}</h3>
                <button class="edit-profile-btn" v-if="currentUser.username" @click="switchContent('profile')">编辑个人资料 →</button>
                <button class="login-btn" v-else @click="handleGoLogin">立即登录</button>
              </div>
              <div class="sidebar-nav" v-if="currentUser.username">
                <ul>
                  <li>
                    <a href="#" @click.prevent="switchContent('profile')" :class="{ 'active': currentContent === 'profile' }">
                      <span class="nav-icon">👤</span>
                      <span>个人中心</span>
                    </a>
                  </li>
                  <li>
                    <a href="#" @click.prevent="switchContent('orders')" :class="{ 'active': currentContent === 'orders' }">
                      <span class="nav-icon">📝</span>
                      <span>我的订单</span>
                    </a>
                  </li>
                  <li>
                  <a href="#" @click.prevent="goToFavorite">
                  <span class="nav-icon">❤️</span>
                  <span>我的收藏</span>
                </a>
                  </li>
                  <li>
                    <a href="#" @click.prevent="goToAddress">
                      <span class="nav-icon">📍</span>
                      <span>收货地址</span>
                    </a>
                  </li>
                  <li>
                    <a href="#" @click.prevent="handleLogout">
                      <span class="nav-icon">🚪</span>
                      <span>退出登录</span>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <!-- 主内容区 -->
          <div class="main-area">
            <!-- 未登录提示 -->
            <div class="no-login-tip" v-if="!currentUser.username">
              <p>请先登录，查看您的个人信息和订单</p>
              <button class="login-btn" @click="handleGoLogin">立即登录</button>
            </div>
            <!-- 已登录：加载/错误状态 -->
            <main v-else>
              <div class="loading-state" v-if="isLoading">
                <div class="spinner"></div>
                <p>加载中...</p>
              </div>
              <div class="error-state" v-if="hasError">
                <p>加载失败，请稍后重试</p>
                <button class="retry-btn" @click="reloadCurrentContent">重试</button>
              </div>
              <!-- 个人信息 -->
              <template v-if="currentContent === 'profile' && !isLoading && !hasError">
                <div class="content-card">
                  <div class="card-header">
                    <h2>个人信息</h2>
                  </div>
                  <div class="card-content">
                    <div class="info-grid">
                      <div class="info-item">
                        <p class="info-label">用户名</p>
                        <p class="info-value">{{ currentUser.username || '未设置' }}</p>
                      </div>
                      <div class="info-item">
                        <p class="info-label">手机号码</p>
                        <p class="info-value">{{ formatPhone(currentUser.phone) }}</p>
                      </div>
                      <div class="info-item">
                        <p class="info-label">电子邮箱</p>
                        <p class="info-value">{{ formatEmail(currentUser.email) }}</p>
                      </div>
                      <div class="info-item">
                        <p class="info-label">注册时间</p>
                        <p class="info-value">
                          {{ currentUser?.created_at ? formatDateTime(currentUser.created_at) : '未知' }}
                        </p>
                      </div>
                      <div class="info-item">
                        <p class="info-label">最后登录</p>
                        <p class="info-value">{{userProfile?.last_login? formatDateTime(userProfile.last_login) : '未知'}}</p>
                      </div>
                    </div>
                    <!-- 点击跳转编辑页（携带用户信息） -->
                    <button class="edit-info-btn" @click="handleEditProfile">编辑个人信息</button>
                  </div>
                </div>
              </template>
              <!-- 我的订单 -->
              <template v-if="currentContent === 'orders' && !isLoading && !hasError">
                <div class="content-card order-card">
                  <div class="card-header with-link">
                    <h2>我的订单</h2>
                  </div>
                  <div class="order-list">
                    <!-- 订单项 -->
                    <div v-for="order in orders" :key="order.id" class="order-item">
                      <!-- 订单头部信息 -->
                      <div class="order-header-info">
                        <div class="order-id-date">
                          <span class="order-number">订单编号: {{ order.order_number || '未知' }}</span>
                          <span class="order-date">{{ formatDateTime(order.created_at) }}</span>
                        </div>
                        <span class="order-status" :class="order.statusClass">{{ order.status || '未知状态' }}</span>
                      </div>
                  <!-- 订单商品信息 -->
                  <div class="order-product" v-for="(item, index) in order.items" :key="index">
                    <img
            :src="item.product_image
              ? (item.product_image.startsWith('http') ? item.product_image : `http://127.0.0.1:8000/static/${item.product_image}`)
              : ''"
            :alt="item.product_name" style="height: 60px;width: 65px ;margin-right: 15px  "
          />
                    <div class="product-details">
                      <h3 class="product-name">{{ item.product_name || '未知商品' }}</h3>
                      <p class="product-specs">{{ item.product_type || '无规格信息' }}</p>
                      <p class="product-quantity">数量: {{ item.quantity || 0 }}</p>
                    </div>
                    <div class="product-price">¥{{ (item.price || 0).toFixed(2) }}</div>
                  </div>
                  <!-- 订单总结信息 -->
                  <div class="order-summary">
                    <p class="order-total">实付款: <span class="total-amount">¥{{ (order.total_amount || 0).toFixed(2) }}</span></p>
                    <div class="order-actions">
                      <router-link :to="'/all-coffees'">
                        <button class="buy-again-btn" >再次购买</button>
                      </router-link>

                    </div>
                  </div>
                    </div>
                    <!-- 空状态 -->
                    <div v-if="orders.length === 0" class="empty-state">
                      <p>暂无订单记录</p>
                    </div>
                  </div>
                </div>
              </template>
            </main>
          </div>
        </div>
      </div>
    </main>
    <!-- 返回顶部按钮 -->
    <button class="back-to-top" v-if="showBackToTop" @click="scrollToTop">↑</button>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import api from '@/api/request'

export default {
  name: 'UserCenter',
  data() {
    return {
      // 当前显示的内容类型
      currentContent: 'profile',
      // 加载状态管理
      isLoading: false,
      hasError: false,
      // 移动端菜单状态
      isMobileMenuOpen: false,
      showBackToTop: false,
      defaultAvatar: 'https://picsum.photos/id/64/200/200', // 默认头像
      defaultProductImage: 'https://picsum.photos/id/26/200/200', // 默认产品图片
      // 订单相关数据
      orders: [],
      activeOrderFilter: 'all',
      // 收藏相关数据
      favorites: [],
      // 地址相关数据
      addresses: [],
      showAddAddressForm: false,
      editingAddressId: null,
      addressForm: {
        name: '',
        phone: '',
        province: '',
        city: '',
        district: '',
        detail: '',
        isDefault: false
      },
      // 表单相关数据
      form: {},
      saving: false,
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
        ],
        phone: [
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
        ]
      },
      // 添加一个标记防止重复请求
      isLoadingProfile: false
    };
  },
  computed: {
    ...mapState(['profile']), // 映射Vuex中的登录状态
    userProfile() {
      return this.$store.state.profile || {}
    },
    currentUser: {
      get() {
        return this.profile || {}
      },
      set(value) {
        // 设置currentUser时调用Vuex action
        this.setProfile(value);
      }
    },
    // 根据筛选条件过滤订单
    filteredOrders() {
      if (this.activeOrderFilter === 'all') {
        return this.orders
      }
      return this.orders.filter(order => order.filterKey === this.activeOrderFilter)
    }
  },
  created() {
    this.init() // 初始化表单数据
  },
  methods: {
    ...mapActions(['setProfile', 'clearProfile']), // 映射Vuex actions
    goToFavorite() {
      this.$router.push('/favorite');
    },
    goToAddress() {
      this.$router.push('/addresslist');
    },
    // 切换显示内容
    switchContent(contentType) {
      this.currentContent = contentType;
      this.loadContentData(contentType);
      if (contentType === 'favorites') {
        this.$router.push('/favorites'); // 路由路径需和你Favorite.vue实际配置的path一致
      }
    },
    // 加载对应内容的数据
    async loadContentData(contentType) {
      this.isLoading = true;
      this.hasError = false;
      try {
        switch(contentType) {
          case 'profile':
            await this.loadUserProfile();
            break;
          case 'orders':
            await this.loadOrders();
            break;
          case 'favorites':
            await this.loadFavorites();
            break;
          case 'addresses':
            await this.loadAddresses();
            break;
        }
      } catch (error) {
        console.error('加载数据失败:', error);
        this.hasError = true;
        this.$message.error('加载失败，请稍后重试');
      } finally {
        this.isLoading = false;
      }
    },
    // 重新加载当前内容
    reloadCurrentContent() {
      this.loadContentData(this.currentContent);
    },
    // 加载用户个人资料
  async loadUserProfile() {
  if (this.isLoadingProfile) {
    return;
  }
  try {
    this.isLoadingProfile = true;
    const response = await api.get('/users/me');
    this.setProfile(response.data);
    this.init();
    // 强制刷新当前内容视图
    this.currentContent = '';
    this.$nextTick(() => {
      this.currentContent = 'profile';
    });
  } catch (error) {
    console.error('加载个人资料失败:', error);
    throw error;
  } finally {
    this.isLoadingProfile = false;
  }
},
    // 加载订单数据
    async loadOrders() {
      try {
        const userId = this.userProfile?.id;
        if (!userId) {
          throw new Error('未获取到当前用户ID');
        }
        const orderUrl = `/order/user/${userId}`;
        const response = await api.get(orderUrl);
        // 直接使用后端返回的结构，不需要额外转换
        this.orders = response.data;
        console.log("订单数据加载成功：", this.orders);
      } catch (error) {
        console.error('加载订单失败:', error);
        this.$message.error(error.message || '加载订单数据异常');
        throw error;
      }
    },
    // 点击编辑个人信息：携带当前用户信息跳转到Editmy页面
    handleEditProfile() {
      // 提取当前用户信息（包含脱敏前的完整数据）
      const userData = {
        username: this.currentUser.username || '',
        phone: this.currentUser.phone || '', // 传递完整手机号（未脱敏）
        email: this.currentUser.email || '', // 传递完整邮箱（未脱敏）
        realName: this.currentUser.realName || '',
        gender: this.currentUser.gender || 'secret',
        birthday: this.currentUser.birthday || '',
        head_image: this.userProfile?.head_image || '' // 携带当前头像地址
      };
      // 通过路由query传递参数，跳转到编辑页
  this.$router.push({
    path: '/editmy',  // 确保这个路径与你的Editmy页面路由配置一致
    params: {
      userData: this.currentUser
    }
  });
    },
    toggleMobileMenu() {
      this.isMobileMenuOpen = !this.isMobileMenuOpen;
    },
    scrollToTop() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    },
    // 跳转到登录页面
    handleGoLogin() {
      this.$router.push('/login');
    },
    handleScroll() {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      this.showBackToTop = scrollTop > 300;
    },
    // 手机号脱敏
    formatPhone(phone) {
      if (!phone) return '未设置';
      return phone.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2');
    },
    // 邮箱脱敏
    formatEmail(email) {
      if (!email) return '未设置';
      return email.replace(/^(\w{3})\w+@(\w+\.\w+)$/, '$1***@$2');
    },
    // 格式化日期时间显示
    formatDateTime(dateTime) {
      if (!dateTime) return '未知';
      if (typeof dateTime === 'string') {
        const date = new Date(dateTime);
        if (!isNaN(date.getTime())) {
          return date.toLocaleString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit'
          }).replace(/\//g, '-');
        }
      }
      return dateTime;
    },
    // 处理退出登录
    handleLogout() {
      localStorage.removeItem('token');
      localStorage.removeItem('userInfo');
      this.clearProfile();
      this.currentUser = {};
      this.$router.push('/user-index');
    },
    // 初始化方法
    init() {
      if (this.profile) {
        this.form = JSON.parse(JSON.stringify(this.profile));
      } else {
        this.form = {};
      }
      if (this.currentUser.username && !Object.keys(this.currentUser).length) {
        this.loadContentData('profile');
      }
    },
    // 保存方法
    async save() {
      const valid = await this.$refs.form.validate().catch(() => false);
      if (!valid) return;
      this.saving = true;
      try {
        await api.put('/users/me', this.form);
        this.$message.success('保存成功');
        const response = await api.get('/users/me');
        this.setProfile(response.data);
        const updatedUser = JSON.stringify(this.profile);
        localStorage.setItem('userInfo', updatedUser);
        this.init();
      } catch (e) {
        this.$message.error(e?.response?.data?.detail || '保存失败');
      } finally {
        this.saving = false;
      }
    },
    // 重置方法
    reset() {
      this.init();
    },
    // 加载收藏数据
    async loadFavorites() {
      try {
        const userId = this.userProfile?.id;
        if (!userId) {
          throw new Error('未获取到当前用户ID');
        }
        const response = await api.get(`/favorites/user/${userId}`);
        this.favorites = response.data;
      } catch (error) {
        console.error('加载收藏失败:', error);
        throw error;
      }
    },
    // 加载地址数据
    async loadAddresses() {
      try {
        const userId = this.userProfile?.id;
        if (!userId) {
          throw new Error('未获取到当前用户ID');
        }
        const response = await api.get(`/addresses/user/${userId}`);
        this.addresses = response.data;
      } catch (error) {
        console.error('加载地址失败:', error);
        throw error;
      }
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
    if (this.profile) {
      this.init();
    } else {
      const storedUser = localStorage.getItem('userInfo');
      if (storedUser) {
        try {
          this.setProfile(JSON.parse(storedUser));
          this.init();
        } catch (e) {
          console.error('解析用户信息失败:', e);
          localStorage.removeItem('userInfo');
        }
      }
    }
    // 监听路由返回（从Editmy页回来时，重新加载个人信息）
this.$router.afterEach((to, from) => {
  // 当从编辑页返回个人中心时，强制刷新数据
  if (to.path === '/user-center' && from.path === '/editmy') {
    this.loadUserProfile(); // 重新拉取最新用户数据
  }
});
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  filters: {
    formatDate(val) {
      if (!val) return '-';
      return new Date(val).toLocaleString();
    }
  }
};
</script>
<style scoped>
/* 全局样式 - 改为咖啡色主题 */
.user-center {
  min-height: 100vh;
  background-color: #8B5A2B; /* 深棕色背景 */
  padding: 20px 0;
}
.main-content {
  max-width: 1200px;
  margin: 0 auto;
}
.container {
  background-color: #F5F0E6; /* 浅棕色背景 */
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  padding: 20px;
}
.breadcrumbs {
  margin-bottom: 20px;
  font-size: 14px;
  color: #5D4037; /* 深棕文字 */
}
.breadcrumbs router-link {
  color: #8B4513; /* 棕色链接 */
  text-decoration: none;
}
.breadcrumbs span {
  margin: 0 8px;
}
.content-grid {
  display: flex;
  gap: 20px;
}
/* 侧边栏样式 */
.sidebar {
  width: 260px;
  flex-shrink: 0;
}
.user-card {
  background-color: #E8DCCA; /* 棕褐色卡片背景 */
  border-radius: 8px;
  padding: 20px;
}
.avatar-container {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 15px;
  border: 2px solid #D2B48C; /* 棕褐色边框 */
}
.username {
  text-align: center;
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 500;
  color: #5D4037; /* 深棕文字 */
}
.edit-profile-btn, .login-btn {
  width: 100%;
  padding: 8px 0;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-size: 14px;
}
.edit-profile-btn {
  background-color: #8B4513; /* 棕色按钮 */
  color: #fff;
}
.login-btn {
  background-color: #A0522D; /* 棕红色按钮 */
  color: #fff;
}
.sidebar-nav {
  margin-top: 20px;
}
.sidebar-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar-nav li {
  margin-bottom: 5px;
}
.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  border-radius: 4px;
  color: #5D4037; /* 深棕文字 */
  text-decoration: none;
  transition: background-color 0.3s;
}
.sidebar-nav a.active, .sidebar-nav a:hover {
  background-color: #D2B48C; /* 棕褐色高亮 */
  color: #5D4037; /* 深棕文字 */
}
.nav-icon {
  font-size: 18px;
}
/* 主内容区样式 */
.main-area {
  flex: 1;
}
.no-login-tip {
  text-align: center;
  padding: 50px 0;
  background-color: #E8DCCA; /* 棕褐色提示框 */
  border-radius: 8px;
}
.no-login-tip p {
  margin-bottom: 20px;
  font-size: 16px;
  color: #5D4037; /* 深棕文字 */
}
/* 内容卡片通用样式 */
.content-card {
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.card-header {
  padding: 15px 20px;
  border-bottom: 1px solid #D2B48C; /* 棕色边框 */
  font-size: 18px;
  font-weight: 500;
  color: #5D4037; /* 深棕文字 */
  margin: 0;
}
.card-header.with-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
}
.view-all-btn {
  color: #8B4513; /* 棕色链接 */
  background: transparent;
  border: none;
  padding: 0;
  font-size: 14px;
  cursor: pointer;
}
.card-content {
  padding: 20px;
}
/* 个人信息样式 */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}
.info-item {
  background-color: #F5F0E6; /* 浅棕色背景 */
  padding: 15px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.info-label {
  font-size: 14px;
  color: #8B4513; /* 棕色标签 */
  margin-bottom: 5px;
}
.info-value {
  font-size: 16px;
  color: #5D4037; /* 深棕文字 */
}
.edit-info-btn {
  padding: 8px 16px;
  background-color: #8B4513; /* 棕色按钮 */
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}
/* 订单样式 */
.order-card {
  border: 1px solid #E8DCCA; /* 棕色边框 */
}
.order-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 20px 20px;
}
.order-item {
  border: 1px solid #E8DCCA; /* 棕色边框 */
  border-radius: 6px;
  overflow: hidden;
  background-color: #fff;
}
.order-header-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16px 20px;
  background-color: #F5F0E6; /* 浅棕色背景 */
}
.order-id-date {
  flex: 1;
}
.order-number {
  display: block;
  color: #5D4037; /* 深棕文字 */
  font-size: 14px;
  margin-bottom: 8px;
}
.order-date {
  display: block;
  color: #8B4513; /* 棕色文字 */
  font-size: 12px;
}
.order-status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: #666;
  background-color: #E8DCCA; /* 棕褐色背景 */
}
.order-status[data-status="已完成"] {
  background-color: #D2B48C;
  color: #5D4037;
}
.order-status[data-status="待付款"] {
  background-color: #CD853F;
  color: #fff;
}
.order-status[data-status="已取消"] {
  background-color: #A0522D;
  color: #fff;
}
.order-product {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #E8DCCA; /* 棕色边框 */
}
.product-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 16px;
  flex-shrink: 0;
}
.product-details {
  flex: 1;
  min-width: 0;
  padding-left: 15px;
}
.product-name {
  font-size: 14px;
  color: #5D4037; /* 深棕文字 */
  margin: 0 0 8px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-specs {
  font-size: 12px;
  color: #8B4513; /* 棕色文字 */
  margin: 0 0 8px 0;
}
.product-quantity {
  font-size: 12px;
  color: #8B4513; /* 棕色文字 */
  margin: 0;
}
.product-price {
  font-size: 14px;
  color: #5D4037; /* 深棕文字 */
  font-weight: 500;
  white-space: nowrap;
}
.order-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
}
.order-total {
  font-size: 14px;
  color: #8B4513; /* 棕色文字 */
  margin: 0;
}
.total-amount {
  color: #A0522D; /* 棕红色金额 */
  font-weight: 500;
}
.order-actions {
  display: flex;
  gap: 10px;
}
.buy-again-btn, .view-details-btn {
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}
.buy-again-btn {
  color: #8B4513; /* 棕色文字 */
  background-color: #F5F0E6; /* 浅棕色背景 */
  border: 1px solid #D2B48C; /* 棕色边框 */
}
.buy-again-btn:hover {
  background-color: #E8DCCA; /* 深一点的棕色 */
}
.view-details-btn {
  color: #fff;
  background-color: #8B4513; /* 棕色按钮 */
  border: 1px solid #8B4513; /* 棕色边框 */
}
.view-details-btn:hover {
  background-color: #5D4037; /* 更深的棕色 */
}
/* 空状态样式 */
.empty-state {
  text-align: center;
  padding: 40px 0;
  color: #8B4513; /* 棕色文字 */
}
.go-shopping-btn {
  margin-top: 16px;
  padding: 8px 16px;
  color: #8B4513; /* 棕色文字 */
  background-color: transparent;
  border: 1px solid #8B4513; /* 棕色边框 */
  border-radius: 4px;
  cursor: pointer;
}
/* 加载和错误状态 */
.loading-state {
  text-align: center;
  padding: 50px 0;
  color: #8B4513; /* 棕色文字 */
}
.spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto 15px;
  border: 4px solid #F5F0E6; /* 浅棕色 */
  border-top: 4px solid #8B4513; /* 棕色 */
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.error-state {
  text-align: center;
  padding: 50px 0;
  color: #A0522D; /* 棕红色错误提示 */
}
.retry-btn {
  margin-top: 15px;
  padding: 8px 16px;
  background-color: #8B4513; /* 棕色按钮 */
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
/* 返回顶部按钮 */
.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #8B4513; /* 棕色按钮 */
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  transition: all 0.3s;
}
.back-to-top:hover {
  background-color: #5D4037; /* 更深的棕色 */
}
/* 动画 */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* 响应式调整 */
@media (max-width: 768px) {
  .content-grid {
    flex-direction: column;
  }
  .sidebar {
    width: 100%;
  }
  .info-grid {
    grid-template-columns: 1fr;
  }
  .order-product {
    flex-direction: column;
    align-items: flex-start;
  }
  .product-image {
    margin-bottom: 12px;
  }
  .product-price {
    margin-top: 8px;
    align-self: flex-start;
  }
  .order-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .order-actions {
    width: 100%;
    justify-content: space-between;
  }
}
</style>
